$f: 19.2;

.home {
  // position: relative;
  width: 100%;

  .container {
    padding: 177/$f+vw 167/$f+vw 0 167/$f+vw;
    background: #F9F6F1;
    position: relative;

    .bg {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      overflow: hidden;
      max-height: 100%;
      img {
        display: block;
        width: 100%;
        object-fit: cover;
        max-height: 100%;
      }
    }

    .main {
      background: #FFF;
      position: relative;
      z-index: 10;
      width: 1400/$f+vw;
      margin: 0 auto;
      .r {
        width:100%;
        padding: 60/$f+vw 131/$f+vw 80/$f+vw 131/$f+vw;
        .title{
          font-size: 26/$f+vw;
          font-weight: bold;
          border-bottom: 1px solid #D4D4D4;
          padding-bottom: 15/$f+vw;
          margin-bottom: 30/$f+vw;
        }
        .box {
          .item {
            margin-bottom: 60/$f+vw;

            .t {
              color: #003982;
              font-size: 26/$f+vw;
              font-weight: 700;
              margin-bottom: 24/$f+vw;
            }

            .info {
              line-height: 1.8;
              .noDot{
                &::before{
                  display: none;
                }
              }

              p {
                color: #333;
                font-size: 18/$f+vw;

                &::before {
                  content: '';
                  display: inline-block;
                  width: 5px;
                  height: 5px;
                  background: #003982;
                  border-radius: 50%;
                  margin-right: 15/$f+vw;
                  transform: translateY(-5/$f+vw);
                }
              }
            }

            .cases {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .ci {
                width: 48%;
                background: #FFF;
                box-shadow: 0px 4px 20px 0px rgba(3, 32, 73, 0.16);
                margin-bottom: 30/$f+vw;
                .pic {
                  overflow: hidden;
                  img {
                    width: 100%;
                    display: block;
                    object-fit: cover;
                    transition: all 600ms;
                    height: 322/$f+vw;
                  }
                }

                .text {
                  padding: 32/$f+vw;

                  .p1 {
                    color: #000;
                    font-size: 18/$f+vw;
                    font-weight: 700;
                  }

                  .des {
                    color: #666;
                    font-size: 18/$f+vw;
                    margin-top: 16/$f+vw;
                    line-height: 1.6;
                  }
                }
                &:hover{
                  .pic{
                    img{
                      transform: scale(1.05);
                    }
                  }
                }
              }
            }

            .partners {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 20/$f+vw;
              .pic {
                width: 100%;
                height: 73/$f+vw;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #D7D7D7;
                transition: all 600ms;
                img{
                  max-height: 80%;
                  display: block;
                  object-fit: contain;
                  transition: all 600ms;
                }
                &:hover{
                  border-color: #003982;
                  img{
                    transform: scale(1.05);
                  }
                }
              }
            }
          }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      padding: 20px 5% 60px 5%;
      .main{
        width: 100%;
        .r{
          width: 100%;
          padding: 15px;
          .title{
            font-size: 18px;
            padding-bottom: 15px;
            margin-bottom: 15px;
          }
          .box{
            .item{
              .t{
                font-size: 18px;
                margin-bottom: 10px;
              }
              .info{
                p{
                  font-size: 16px;
                  &::before{
                    transform: translateY(-3px);
                    margin-right: 5px;
                  }
                }
              }
              .cases{
                flex-direction: column;
                .ci{
                  width: 100%;
                  margin-bottom: 20px;
                  .pic{
                    img{
                      height: 200px;
                    }
                  }
                  .text{
                    padding: 15px;
                    .p1{
                      font-size: 16px;
                    }
                    .des{
                      font-size: 16px;
                      margin-top: 10px;
                    }
                  }
                }
              }
              .partners{
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                .pic{
                  height: 60px;
                }
              }
            }
          }
        }
      }
    }
  }
}